<template>
  <div class="container">
    <el-popover
      placement="bottom-start"
      :visible="visible"
      :width="430"
      trigger="click"
    >
      <template #reference>
        <div class="select-box" @click="visible = !visible">
          <span>{{ selectOuterCity }}</span>

          <el-icon-arrow-down
            class="icon"
            :class="{ rotate: visible }"
          ></el-icon-arrow-down>
        </div>
      </template>

      <div class="top-operate">
        <el-row>
          <el-col :span="12">
            <el-radio-group v-model="typeRadio">
              <el-radio-button label="按字母" value="1" />
              <el-radio-button label="按省份" value="2" />
            </el-radio-group>
          </el-col>
          <el-col :offset="1" :span="8">
            <el-select
              v-model="selectCity"
              placeholder="请选择"
              filterable
              @change="selectCityChange"
              :filter-method="filterMethod"
            >
              <el-option
                v-for="item in options"
                :key="item.id"
                :label="item.name"
                :value="item.id"
              />
            </el-select>
          </el-col>
        </el-row>
      </div>
      <div class="info" v-if="typeRadio == '1'">
        <div class="alphabet">
          <div
            class="alphabet-item"
            v-for="(item, index) in Object.keys(city)"
            :key="index"
            @click="onCharClick(index)"
          >
            {{ item }}
          </div>
        </div>
        <el-scrollbar max-height="300px">
          <div class="city-list">
            <div
              class="city-item"
              v-for="(value, key) in city"
              :key="key"
              :ref="cityItemFn"
            >
              <el-row class="row">
                <el-col :span="2" class="label">{{ key }}:</el-col>
                <el-col :span="21" class="inner-list">
                  <div
                    class="inner"
                    v-for="item in value"
                    :key="item.id"
                    @click="onCitySelect(item)"
                  >
                    {{ item.name }}
                  </div>
                </el-col>
              </el-row>
              <div>
                <span></span>
              </div>
            </div>
          </div>
        </el-scrollbar>
      </div>
      <div class="province-info" v-if="typeRadio == '2'">
        <div class="alphabet">
          <div
            class="alphabet-item"
            v-for="(item, index) in Object.keys(provinceData)"
            :key="index"
            @click="onProvinceCharClick(item)"
          >
            {{ item }}
          </div>
        </div>
        <el-scrollbar max-height="300px">
          <div class="province-list">
            <div
              class="province-item"
              v-for="(value, key) in provinceData"
              :key="key"
              :ref="cityItemFn"
            >
              <el-row class="row" :id="`province-${key}`">
                <el-col :span="3" class="label">{{ key }}:</el-col>
                <el-col :span="20" class="inner-list">
                  <template v-for="innerItem in value" :key="innerItem.id">
                    <div
                      class="inner"
                      v-for="(city, cityIndex) in innerItem.data"
                      :key="cityIndex"
                      @click="onCityNameSelect(city)"
                    >
                      {{ city }}
                    </div>
                  </template>
                </el-col>
              </el-row>
              <div>
                <span></span>
              </div>
            </div>
          </div>
        </el-scrollbar>
      </div>
    </el-popover>
  </div>
</template>

<script setup lang="ts">
import { ref, onMounted } from "vue";
import CITY_DATA from "../lib/city";
import { CityItem } from "./types.ts";
import PROVINCE_DATA from "../lib/province.json";
const emits = defineEmits(["cityChange", "cityNameChange"]);

let visible = ref<boolean>(false);
const typeRadio = ref("1");
// 最外层选中的city;
const selectOuterCity = ref("请选择");
const selectCity = ref("");
let allCityList: CityItem[] = [];
let options = ref<CityItem[]>([]);
onMounted(() => {
  allCityList = Object.values(CITY_DATA.cities).flat(2);
  options.value = allCityList;
});

//搜索
const filterMethod = (val: string) => {
  if (val) {
    options.value = allCityList.filter((item) => {
      return item.name.includes(val) || item.spell.includes(val);
    });
  } else {
    options.value = allCityList;
  }
};

function selectCityChange(id: number) {
  let cityItem = allCityList.find((item: CityItem) => {
    return item.id === id;
  });
  if (cityItem) {
    selectOuterCity.value = cityItem?.name;
    visible.value = false;
    emits("cityChange", cityItem);
  }
}

//字母排序的city数据
let city = CITY_DATA.cities;

//city的dom行
let cityItemList = ref<any[]>([]);
const cityItemFn = (el: any) => {
  if (el) {
    cityItemList.value.push(el);
  }
};
function onCharClick(index: number) {
  cityItemList.value[index].scrollIntoView({ behavior: "smooth" });
}
//点击了城市
function onCitySelect(item: CityItem) {
  selectOuterCity.value = item?.name;
  visible.value = false;
  emits("cityChange", item);
}

const onCityNameSelect = (cityName: string) => {
  selectOuterCity.value = cityName;
  visible.value = false;
  emits("cityNameChange", cityName);
};

let provinceData = PROVINCE_DATA;

function onProvinceCharClick(provinceChar: string) {
  let el = document.querySelector(`#province-${provinceChar}`);
  if (el) {
    el.scrollIntoView({ behavior: "smooth" });
  }
}
</script>

<style lang="scss" scoped>
.container {
  width: fit-content;
}
.select-box {
  display: flex;
  align-items: center;
  cursor: pointer;
  .icon {
    position: relative;
    top: 2px;
    margin-left: 5px;
    transition: all 0.3s;
  }
}

.rotate {
  transform: rotate(180deg);
}
.alphabet {
  display: flex;
  flex-wrap: wrap;
  margin-top: 10px;
  &-item {
    border: 1px solid #ddd;
    padding: 2px 3px;
    min-width: 20px;
    text-align: center;
    margin: 5px;
    cursor: pointer;
    border-radius: 3px;
  }
}
.city-list,
.province-list {
  margin-top: 10px;
  .city-item,
  .province-item {
    margin-bottom: 10px;
    .row {
      align-items: baseline;
    }
    .label {
      font-weight: bold;
    }
    .inner-list {
      display: flex;
      flex-wrap: wrap;
    }
    .inner {
      padding: 6px 6px 0 0;
      margin-bottom: 3px;
      cursor: pointer;
    }
  }
}
</style>
